<template>
  <div class="app-container">
    <template>
  <div>
    <el-row>
      <el-col :span="4" style="margin-bottom: 20px;">
        <el-button type="primary">01创建产品</el-button>
      </el-col>
      <router-link to="/device">
      <el-col :span="4" style="margin-bottom: 20px;">
        <el-button type="primary">02创建设备</el-button>
      </el-col>
      </router-link >
      <el-col :span="4" style="margin-bottom: 20px;">
        <el-button type="primary">03设备端开发</el-button>
      </el-col>
      <el-col :span="4" style="margin-bottom: 20px;">
        <el-button type="primary">04查看上报数据</el-button>
      </el-col>
      <el-col :span="4" style="margin-bottom: 20px;">
        <el-button type="primary">05配置数据流转</el-button>
      </el-col>
    </el-row>
  </div>
</template>
    
    <!-- 条件框 -->
    <el-row>
        <el-col :span="4">
            <el-input @clear="search()"  placeholder="请输入设备名字" v-model="pageDto.where.name" clearable> </el-input>
        </el-col>
        <el-col :span="2">
            <el-button @click="pageDto.now=1;search()" type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
         <el-col :span="2">
            <el-button @click="dialogFormVisible=true"  type="success" icon="el-icon-circle-plus">添加</el-button>
        </el-col>
    </el-row>
    
    <el-table  :data="qfPList" style="width: 100%">

      <el-table-column prop="id" label="设备id"> </el-table-column>
      <el-table-column prop="name" label="产品名称"> </el-table-column>
      <el-table-column prop="productKey" label="ProductKey"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>

      <el-table-column   label="操作"> 

           <template slot-scope="scope">
            <el-button type="text" @click="dialogVisible = true">详情</el-button>
            
            <el-popconfirm title="确定删除吗？">
             <el-button  slot="reference" @click="drop(scope.row.id)" type="danger" size="mini" icon="el-icon-delete" style="margin-left: 10px;"></el-button>  
            </el-popconfirm>   

           </template>

      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageDto.now"
      :page-size="pageDto.size"
      layout="total,  prev, pager, next"
      :total="total"
    >
    </el-pagination>
    <el-dialog
  title="产品详情"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <el-table  :data="qfPList" >
    <el-table-column prop="id" label="产品id"> </el-table-column>
    <el-table-column prop="name" label="产品名称"> </el-table-column>
      <el-table-column prop="productKey" label="ProductKey"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>

  </el-table>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>


    <el-dialog title="添加产品" :visible.sync="dialogFormVisible">
        <el-form :model="form">

          <el-form-item label="产品id" >
                <el-input v-model="product.id" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="产品名称" >
                <el-input v-model="product.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="ProductKey" >
                <el-input v-model="product.productKey" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="创建时间" >
                <el-input v-model="product.createTime" autocomplete="off"></el-input>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
        </div>
     </el-dialog>
  </div>
</template>
<script>
//导入product api
import { page, save ,drop,all} from "@/api/product";  
//导入pcd组件
// import PCD  from '../components/pcd.vue';
export default {
  components: {
    // // PCD:PCD
    // PCD
  },
  data() {
    return {
      dialogFormVisible:false,
      dialogVisible: false,
      qfPList: [],
      qfById:[],
      pageDto: {
        now: 1,
        size: 3,
        where: {},
      },
      pages: 0,
      product: {
        id: "",
        name: "",
        productKey: "",
        createTime: "",
      },
      total: 0,
    };
  },
  methods: {
    drop(id){
         //与服务端交互
         drop(id).then(res=>{
            if(res.code==0){
                this.$message({
                  type:"success",
                  message:res.msg,
                })

                this.search();
            }
            
         })
    },
    
    handleSizeChange(size) {
      this.pageDto.size = size;
      this.search();
    },
    handleCurrentChange(now) {
      this.pageDto.now = now;
      this.search();
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    search() {
      page(this.pageDto).then((res) => {
        this.qfPList = res.list;
        this.pages = res.pages;
        this.total = res.total;
      });
    },
    // save() {
    //   if (this.product.id) {
    //     update(this.product).then((res) => {
    //       this.pageDto.now = 1;
    //       this.search();
    //       this.product = {};
    //     });
    //   } else {
    //     save(this.product).then((res) => {
    //       this.pageDto.now = 1;
    //       this.search();
    //       this.product = {};
    //       this.dialogFormVisible = false;
    //       this.$message({
    //         message: res.msg,
    //         type: 'error'
    //       });
    //     });
    //   }
      
    // },
    save() {
  save(this.product).then((res) => {
    this.pageDto.now = 1;
    this.search();
    this.product = {};
    this.dialogFormVisible = false;
    this.$message({
      message: res.msg,
      type: 'success'
    });
  });
}
  },
  created() {
    this.search();
  },
};

</script>

<style lang="">
</style>